<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'

interface Note {
  id: number
  title: string
  content: string
  createdAt: Date
  updatedAt: Date
}

interface Props {
  note: Note | null
}

interface Emits {
  (e: 'update-content', content: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const content = ref('')
const textareaRef = ref<HTMLTextAreaElement>()

// 监听笔记变化，更新编辑器内容
watch(
  () => props.note,
  (newNote) => {
    if (newNote) {
      content.value = newNote.content
      nextTick(() => {
        adjustTextareaHeight()
      })
    } else {
      content.value = ''
    }
  },
  { immediate: true }
)

// 监听内容变化，通知父组件
watch(
  content,
  (newContent) => {
    emit('update-content', newContent)
  },
  { flush: 'post' }
)

// 自动调整文本域高度
const adjustTextareaHeight = (): void => {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
  }
}

// 处理输入
const handleInput = (): void => {
  adjustTextareaHeight()
}

// 处理 Tab 键
const handleKeydown = (event: KeyboardEvent): void => {
  if (event.key === 'Tab') {
    event.preventDefault()
    const textarea = event.target as HTMLTextAreaElement
    const start = textarea.selectionStart
    const end = textarea.selectionEnd

    // 插入两个空格代替 Tab
    const newContent = content.value.substring(0, start) + '  ' + content.value.substring(end)
    content.value = newContent

    nextTick(() => {
      textarea.selectionStart = textarea.selectionEnd = start + 2
    })
  }
}

// 插入 Markdown 格式
</script>

<template>
  <div class="editor-container">
    <!-- 空状态 -->
    <v-container v-if="!note" fluid class="fill-height">
      <v-row justify="center" align="center" class="fill-height">
        <v-col cols="12" class="text-center">
          <v-icon icon="mdi-orange" size="64" color="orange" class="mb-4"></v-icon>
          <h3 class="text-h4 mb-2">Orange Note</h3>
          <p class="text-body-1 text-grey-darken-1">选择左侧的笔记开始编辑，或创建一个新笔记</p>
        </v-col>
      </v-row>
    </v-container>

    <!-- 编辑器 -->
    <div v-else class="editor">
      <v-container fluid class="pa-0 fill-height">
        <v-row no-gutters class="fill-height">
          <v-col>
            <v-textarea
              v-model="content"
              placeholder="开始输入你的想法..."
              variant="plain"
              auto-grow
              hide-details
              rows="20"
              class="editor-textarea"
              @input="handleInput"
              @keydown="handleKeydown"
            ></v-textarea>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

<style scoped>
.editor-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor {
  flex: 1;
  height: 100%;
}

.fill-height {
  height: 100%;
}

:deep(.v-field__input) {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 24px !important;
}

:deep(.v-field__field) {
  height: 100%;
}

:deep(.v-input__control) {
  height: 100%;
}

:deep(.v-field) {
  height: 100%;
}

.editor-textarea {
  height: 100%;
}

:deep(.v-field__overlay) {
  display: none;
}
</style>
